<template>
	<div class="category">
		<div class="category-top-bg" :style="{ backgroundImage: 'url(' + (getCategory?.bgImagePath || bgUrl) + ')',
		backgroundRepeat: 'no-repeat' }">
			<h1>文章分类</h1>
		</div>
		<div class="category-container">
			<div class="img-card" v-for="(item,index) in CategoryList" :key="item.id" :title="item.categoryName"
				@click="gotoCategoryList(item)">
				<div class="img">
					<img :src="item.avatar" alt="" height="200px" width="260px">
				</div>
				<div style="text-align: center; width: 100%;margin-top: 10px;" class="categoryName">
					<span style="font-size: 20px;font-weight: 700;">{{item.categoryName}}</span>
				</div>
				<div style="text-align: center; width: 100%;margin-top: 10px;color: gray;">
					<span>{{item.description}}</span>
				</div>
			</div>
		</div>

		<el-empty description="暂无文章" v-if="CategoryList.length==0" :image-size="300"
			image="https://shyvv-1308916267.cos.ap-chengdu.myqcloud.com/mall/58881654671202045.png">
		</el-empty>

	</div>
</template>

<script>
	// 点击效果
	import Click from '../../utils/ClickShow.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				CategoryList: [],
				bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/bolg-background/home.png"
			};
		},
		mounted() {
			Click(".category")
			this.getcategoryData()
		},
		methods: {
			getcategoryData() {
				if (this.$store.state.UserInfo.id == undefined) {
					this.$message.error("请先登录！")
					return
				}
				this.$api.category.getMyCategoryList(this.$store.state.UserInfo.id).then(res => {
					if (res.code == 200) {
						this.CategoryList = res.data
					} else {
						this.$message.error("请先登录！")
					}
				})
			},
			gotoCategoryList(item) {
				this.$router.push({
					path: '/CategoryAndTag',
					query: {
						list: JSON.stringify(item),
						Is: JSON.stringify("category")
					}
				})
			}
		},
		computed: {
			// 通过 mapGetters 辅助函数映射 getters 到组件的计算属性
			...mapGetters(['getCategory'])
		},
		beforeDestroy() {
		}
	};
</script>

<style lang="less" scoped>
	.category-top-bg {
		min-width: 100%;
		height: 500px;
		/* background: url() no-repeat; */
		background-size: 100% 100%;
		background-attachment: fixed;
		background-position-y: -50px;
		position: relative;
	}

	.category-top-bg h1 {
		text-align: center;
		position: relative;
		top: 250px;
		font-size: 30px;
		font-weight: 700;
		// color: white;
	}

	.category-container {
		width: 1250px;
		height: auto;
		margin: 10px auto;
		// border: 1px solid red;
		display: flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.img-card {
		height: 300px;
		width: 260px;
		border-radius: 10px;
		margin: 10px 15px;
		box-shadow: 0px 0px 10px gainsboro;
		cursor: pointer;
	}

	.img-card:hover .categoryName {
		color: rgb(73, 177, 245);
	}


	.img {
		height: 200px;
		width: 260px;
		overflow: hidden;
		border-radius: 10px;
		margin: 0 auto;
	}

	.img img:hover {
		transition: all 0.6s linear;
		transform: scale(1.2);
	}
</style>